@import "common.scss";
.warp{
    height: 100%;
    width: 100%;
    background: #efefef;
    .top{
        box-sizing: content-box;
        height: pr(100);
        background: #ff841d;
        border-bottom: pr(2) solid #e6e6e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 pr(14) 0 pr(34);
        .logo{
            height:pr(50);
        }
        .download{
            width: pr(68);
        }
    }

    .search{
        height: pr(100);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 pr(20);
        border-bottom: pr(2) solid #e6e6e6;
        .box{
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            input{
                width: 100%;
                height: pr(60);
                border: none;
                outline: none;
                background: #f1f1f1;
                border-radius: pr(40);
                padding-left: pr(36);
                font-size: pr(32);
                margin: 0;
            }
            button{
                position: absolute;
                top:0;
                right: pr(0);
                height: pr(60);
                width: pr(125);
                background: #ff841d;
                color: #fff;
                font-size: pr(32);
                border-radius: pr(40);
                border: none;
                outline: none;
                padding: 0;
            }
        }
    }

    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 pr(10);
        background-color: #ebebeb;
        background: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ebebeb));
        background: -moz-linear-gradient(top, #ffffff, #ebebeb);
        background: -o-linear-gradient(top,#ffffff, #ebebeb);
        height: pr(80);
        // border-top: pr(2) solid #ccc;
        border-bottom: pr(2) solid #ccc;
        .maobiao{
           
            display: flex;
            align-items: center;
            
            a{
                flex: 1;
                text-align: center;
                color: #5a5a5a;
                white-space:nowrap;
                font-size: pr(28);
                .mui-icon {
                    font-size: pr(28);
                }
            }
            span{
                padding: 0 pr(5);
            }
        }
        button{
            height: pr(60);
        }
        
    }

    .product{
        width: 100%;
        background: #fff;
        padding: pr(24);
        border-bottom: pr(2) solid #ccc;
        .imgbox{
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            .zhu{
                width: 45%;
                height: 45%;
            }
            .cate{
                position: absolute;
                width: 10%;
                top: 0;
                right: 0;
            }
        }
        .title{
            font-size: pr(32);
            color: black;
        }
    }

    .price{
        margin-top: pr(40);
        ul{
            display: flex;
            height: pr(68);
            li{
                flex: 1;
                // display: flex;
                // flex-direction: column;
                position: relative;

                background-color: #ffbb00;
                background-color: #ffbb00;
                background: -webkit-gradient(linear,0 0,0 100%,from(#ffd050),to(#ffbb00));
                background: -moz-linear-gradient(top, #ffd050, #ffbb00);
                background: -o-linear-gradient(top,#ffd050, #ffbb00);
                a{
                    display: block;
                    height: pr(68);                    
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    font-size: pr(30);
                }
                img{
                    width: pr(16);
                    height: pr(10);
                    position: absolute;
                    bottom: pr(-10);
                    left: 50%;
                    margin-left: pr(-8);
                    display: none;
                    &.active{
                        display: block;
                    }
                }

                &:nth-child(2){
                    border-left: solid pr(2) #c14d00;
                    border-right: solid pr(2) #c14d00;
                }
                &.acitve{
                    background: -webkit-gradient(linear,0 0,0 100%,from(#ffa632),to(#ff9000));
                    background: -moz-linear-gradient(top, #ffa632, #ff9000);
                    background: -o-linear-gradient(top,#ffa632, #ff9000);
                }
            }
        }
        .where{
            background: #fff;
            .content{
                font-size: pr(32);
                padding: pr(20) pr(10);
                .red{
                    color: red;
                }
                tr{
                    td{
                        &:first-child{
                            vertical-align: middle;
                            // justify-self: flex-end;
                        }
                        &:nth-child(3){
                            text-align: right;
                            padding-right: pr(20);
                        }
                    }
                }
                img{
                    vertical-align: middle;
                }
                a{
                    color: #5a5a5a; 
                }
            }
            .note{
               font-size: pr(24); 
               padding: pr(16) pr(20);
            }
        }
        .canshu{
            display: none;
            img{
                width: 100%;
            }
        }
        .pingjia{
            display: none;
            img{
                width: 100%;
            }
        }
    }

    .productcom{
        .pctop{
            height: pr(88);
            border-top: pr(8) solid #7a7a7a;
            background: #dbdbdb;
            font-size: pr(28);
            text-align: center;
            line-height: pr(80);
        }
        ul{
            background: #fff;
            padding: pr(20);
            padding-bottom: 0;
            border-bottom: pr(2) solid #ccc;
            li{
                border-bottom: pr(2) solid #ccc;
                padding-top:pr(20);
                .user{
                    color: #999999;
                    font-size: pr(28);
                }
                .time{
                    font-size: pr(24);
                    color: #666;
                }
                .form{
                    font-size: pr(24);
                    color: #666;
                }
                section{
                    color: #000;
                    font-size: pr(28);
                    line-height: pr(44);
                }
                .huifu{
                    color: #999999;
                    font-size: pr(24);
                }
                &:last-child{
                    border-bottom: none;
                }
            }
        }
        .morebox{
            padding: 0 pr(16);
            margin-top: pr(32);
            .more{
                width: 100%;
                display: block;
                height: pr(64);
                background-color: #d4d4d4;
                background: -webkit-gradient(linear,0 0,0 100%,from(#f1f1f1),to(#d4d4d4));
                background: -moz-linear-gradient(top, #f1f1f1, #d4d4d4);
                background: -o-linear-gradient(top,#f1f1f1, #d4d4d4);
                border-bottom: pr(2) solid #bababa;
                box-shadow: 0 0 pr(2) #666;
                -webkit-border-radius: pr(10);
                -moz-border-radius: pr(10);
                -o-border-radius: pr(10);
                border-radius: pr(10);
                text-align: center;
                font-size: pr(28);
                overflow: hidden;
            }
        }
    }

    .footer{
        margin-top: pr(50);
        .loginbox{
            display: flex;
            align-items: center;
            height: pr(70);
            border-top: pr(2) solid #ccc;
            border-bottom: pr(2) solid #ccc;
            .regist{
                height: pr(70);
                line-height: pr(70);
                border-left: pr(2) solid #ccc;
                border-right: pr(2) solid #ccc;
            }
            a{
                flex: 1;
                color: #5a5a5a;
                font-size: pr(28);
                text-align: center;
            }
        }
        .copyright{
            text-align: center;
            font-size: pr(24);
            margin-top: pr(35);
            p{
              color: #5a5a5a;  
              font-size: pr(24);
              margin: 0;
            }
            .download{
                color: red;
            }
            
            a{
                color: #5a5a5a;
                font-size: pr(24);
            }
        }

    }
    

}